
// 针对axios做封装处理

// 1. 创建一个基于axios的实例对象 axios.create()
//    1.1 baseURL  接口基地址 (url:https / http)  axios('/getname') axios('https://api.com')
//    1.2 timeout  接口的最大等待时间 5-10s 如果超时，直接干掉
//    1.3 大数处理  (处理数据超过js能表达的最大范围 + JSON.parse)

// 2. 请求拦截器
//    全局注入token (request headers 中)

// 3. 响应拦截器
//    3.1 http状态 401, token失效之后 -- 跳回登录页重新获取token数据
//    3.2 自定义错误处理 -- 根据后台返回的数据(成功or失败) 后端接口成功响应，http状态码是200-300，但是后台返回的字段是 false, 处理接口返回的错误信息(需要主动抛出后台返回的错误信息，才能通过catch获取到)，return Promise.reject(e),就可以捕获到后台返回的错误信息
//    3.3 处理自定义业务状态码 （业务场景很复杂  http状态码不够表达  自定义状态 10001 - 10009 ）

// 4. 封装一个函数 兼容 get 和 post请求的参数处理

// 引入axios
import axios from 'axios'
import store from '@/store'
import router from '@/router'
// baseURL设置/超时时间设置
const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/',
  timeout: 5000
})

// axios('/getname')  axios('http://api.com')则会忽略baseURL, 以这个为主

// 请求拦截器  全局注入token
instance.interceptors.request.use(
  config => {
    // console.dir(config)
    // 1. 获取token
    const { token } = store.state.user.profile
    // 2. 请求头设置token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  e => Promise.reject(e)
)

// 响应拦截器
// 401 token失效跳回到登录页
// 自定义错误处理
// 处理自定义业务状态码 (业务场景很复杂 http状态码不够表达 自定义状态 10001 -)
instance.interceptors.response.use(
  res => { // http状态 成功 ( 200 - 300)
    // 1. 解构出核心字段 data message success
    // const { data, msg } = res.data.data
    // 2. 根据决定接口返回的是否是成功的字段success, 做出接口数据返回处理
    // if (success) {
    //   return data
    // } else {
    //   // 接口返回错误信息，手动返回一个reject状态的promise对象 主动暴露错误
    //   return Promise.reject(message)
    // }
    return res.data
  },
  e => { // http 状态 失败 (不介于 200 - 300) 400 - 500
    if (e.response && e.response.status === 401) { // 401 token错误 跳转到登录页
      // vue3.0 中url路径fullpath需要通过.value 获取到  route.value.fullpath
      // url传递参数时：使用encodeURIComponent转义参数
      const redirectUrl = encodeURIComponent(router.currentRoute.value.fullPath)
      // 跳转到登录页时，携带当前页的路径地址
      router.push('/login?redirectUrl=' + redirectUrl)
    }
    if (e?.response?.status === 400) { // 400 抛出后台返回的信息
      console.log('e.response', e.response)
      return Promise.reject(e.response)
    }
    return Promise.reject(e)
  })

// 封装一个函数 兼容 get 和 post请求的参数处理
// 可以根据用户传下来的请求method 自动适配当前接收我们参数的字段名称
/**
 * @description: 兼容method的方法封装
 * @param {String} - url  请求地址
 * @param {String} - method  请求类型
 * @param {Object} - reqData  接口传递的参数 {} 对象形式
 * @return {promise} - promise
 */
function request (url, method, reqData) {
  return instance({
    url,
    method,
    [method.toLowerCase() === 'get' ? 'params' : 'data']: reqData
  })
}

// return 之后，业务场景使用样例  instance是创建的axios实例，原地返回Promise对象，想要通过request().then获取到结果，则将instance return出去就可以得到Promise对象，通过.then()获取到结果
// request().then(res => {})

export default request // 默认导出

// axios({
//   method: 'GET',
//   params: {

//   }
// })

// axios({
//   method: 'POST',
//   data: {

//   }
// })
